<template>
  <view class="svg-icon" :style="{ width: size, height: size }">
    <svg :width="size" :height="size" :fill="color">
      <use :xlink:href="`#icon-${name}`" />
    </svg>
  </view>
</template>

<script setup lang="ts">
defineProps({
  name: {
    type: String,
    required: true,
  },
  size: {
    type: String,
    default: '24rpx',
  },
  color: {
    type: String,
    default: 'currentColor',
  },
})
</script>

<style scoped>
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
